<template>
	<view>
		<view class="goods" v-for="(cg,cg_idx) in cartGoods">
			<view class="check"  @click='clickCheckbox(cg_idx)'>
				<van-checkbox :value="cg.checked" checked-color="#ee0a24"></van-checkbox>
			</view>
			<van-card :price="cg.price" :origin-price="cg.pre_price" :desc="cg.desc"
				:title="cg.name" :thumb="cg.src">
				<template #tags>
					<van-tag plain type="danger">优惠￥{{cg.discount}}元</van-tag>
				</template>
				<template #num>
					<view class="flex-num">
						<view class="btn">
							<van-icon name="minus" @click="subGoods(cg_idx)"/>
						</view>
						<view class="btn">
							{{cg.num}}
						</view>
						<view class="btn">
							<!-- 后期可能改为传递id值 -->
							<van-icon name="plus" @click="addGoods(cg_idx)"/>
						</view>
					</view>
				</template>
			</van-card>
			
		</view>
		<!-- 结算 -->
		<van-submit-bar :price="total" button-text="提交订单">
		  <van-checkbox :value="allChecked" @change="clickAll"  checked-color="#ee0a24">全选</van-checkbox>
		</van-submit-bar>

	</view>
</template>

<script>
	import cartGoodsData from '@/json/cart.json'
	export default {
		data() {
			return {
				cartGoods: [],
				total:0,
				allChecked:false
			}
		},
		onLoad() {
			this.cartGoods = cartGoodsData;
			this.countCart(cartGoodsData)
		},
		methods:{
			subGoods(index){
				let cgs = this.cartGoods;
				if(cgs[index].num>1){
					cgs[index].num--;
					this.cartGoods = cgs;
				}
				this.countCart(this.cartGoods)
			},
			addGoods(index){
				let cgs = this.cartGoods
				cgs[index].num++;
				this.cartGoods = cgs;
				this.countCart(this.cartGoods)
			},
			clickCheckbox(index){
				let cgs = this.cartGoods
				cgs[index].checked = !cgs[index].checked
				this.cartGoods = cgs;
				this.countCart(this.cartGoods)
			},
			clickAll(){
				let checked = !this.allChecked;
				console.log("++++++++++++++++++++++");
				let cgs = this.cartGoods
				for (let i = 0; i < cgs.length; i++) {
					cgs[i].checked = checked;
				}
				this.cartGoods = cgs;
				this.countCart(cgs);
			},
			countCart(cartData){
				// console.log(JSON.stringify(cartData[2]));
				let countChecked = 0;
				let total = 0;
				for (let i = 0; i < cartData.length; i++) {
					const elem = cartData[i];
					if(elem.checked){
						countChecked++;
						total = total + (elem.price*elem.num)
					}
				}
				if(countChecked == cartData.length && countChecked>0){
					this.allChecked = true
				}else{
					this.allChecked = false
				}
				// 计算完总价以后 考虑优惠卷 减钱
				this.total = total*100;
				
			}
		}
	}
</script>

<style>
	.flex-num{
		width: 120rpx;
		display: flex;
	}
	.flex-num .btn{
		width: 38rpx;
		height: 38rpx;
		border:1rpx solid #ccc;
		text-align: center;
		line-height: 38rpx;
	}
	.flex-num .bth:nth-child(2){
		border-left: 0;
		border-right: 0;
	}
	.goods{
		display: flex;
		width: 700rpx;
		padding: 0 25rpx;
		background: var(--van-card-background-color);
		border-bottom: 1rpx solid #ccc;
	}
	.goods .check{
		width: 44rpx;
		height: 176rpx;
		padding: 16rpx 0;
		margin: 16rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	/* # ifdef H5 || APP_PLUS */
	.goods .van-card{
		width: 656rpx;
	}
	.van-nav-bar{
		background: #d81e06;
	}
	.van-nav-bar .van-nav-bar__title{
		color:#FFF !important;
	}

	.van-submit-bar{
		bottom: 110rpx;
	}
	/* # ifend */
</style>
